<template>
  <div class="login_container">
    <toggle-language @languageChange="languageChange"></toggle-language>
    <div class="login_box">
      <h1 @click="handler">{{ $t("login.adminLogin") }}</h1>
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginFormRef"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item prop="username" :label="this.$t('login.username')">
          <el-input
            :placeholder="this.$t('login.loginUsername')"
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" :label="this.$t('login.password')">
          <el-input
            :placeholder="this.$t('login.loginPassword')"
            v-model="loginForm.password"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button class="login_submit" @click="login()">{{
        $t("login.login")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import ToggleLanguage from "../../components/ToggleLanguage.vue";
export default {
  components: { ToggleLanguage },
  name: "Login",
  data() {
    return {
      rulesTranslation: {},
      // 登录表单
      loginForm: {
        username: "",
        password: "",
      },
      // 表单验证规则
      rules: {
        username: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.rules.requiredUsername"),
          },
          {
            min: 3,
            max: 10,
            message: this.$t("login.rules.usernameLength"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.rules.requiredPassword"),
          },
          {
            min: 6,
            max: 16,
            message: this.$t("login.rules.passwordLength"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    // 按下回车执行登录按钮点击事件
    document.addEventListener("keydown", (e) => {
      if (e.keyCode == 13) {
        this.login();
      }
    });
  },
  methods: {
    handler() {
      console.log(this.$t("login.rules.passwordLength"));
    },
    languageChange() {
      // this.rules.username[0].message = this.$t("login.rules.requiredUsername");
      console.log(this.rulesTranslation);
    },
    // 登录
    login() {
      // 后台更改：用户名和密码正确返回code:0 用户名或密码不正确 || 用户名不存在返回code:1
      // 登录前校验
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post("/login", this.loginForm);
        console.log(res);
        if (res.code == 0) {
          this.$message.success(this.$t("login.loginStatusText.success"));
          window.sessionStorage.setItem("token", res.token);
          window.sessionStorage.setItem("user", JSON.stringify(res.user));
          this.$router.push({ path: "/home" });
        } else {
          this.$message.error(this.$t("login.loginStatusText.error"));
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2f3542;
  height: 100%;
  .login_box {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 400px;
    transform: translate(-50%, -50%);
    h1 {
      color: #d1d1d1;
      height: 80px;
      line-height: 80px;
      text-align: center;
    }
    .login_submit {
      background-color: #f56c6c;
      border-color: #f56c6c;
      width: 80%;
      float: right;
      color: white;
      &:hover {
        background-color: #f18787;
        border-color: #f18787;
      }
    }
  }
}
</style>